<template>
  <div>
    <el-card style="height: calc(100vh - 100px)">
      <el-row :gutter="20">
        <el-col :span="6">
          <span class="addCustomerText">开票管理</span>
        </el-col>
        <el-col :span="18">
          <el-row type="flex" justify="end">
            <!-- <el-button v-show="customerCid && active !== 1" @click="prevSteps">上一步
            </el-button>
            <el-button v-show="customerCid && active !== 3" type="primary" @click="nextSteps">下一步
            </el-button> -->
            <!-- <el-button type="primary" @click="handleSave">保存</el-button> -->
            <el-button @click="goaback">返回</el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- 开票信息 -->
      <div>
        <!-- 开票信息填写 -->
        <el-form :rules="addInvoiceRules" ref="invoiceInfoFormRef" :model="invoiceInfoForm" label-width="120px"
          style="margin-top: 20px">
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="开票名称: " prop="invoice_name">
                <el-input v-model="invoiceInfoForm.invoice_name" placeholder="请输入开票名称" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="组织信用代码: " prop="bank_code">
                <el-input v-model="invoiceInfoForm.bank_code" placeholder="请输入组织信用代码" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="账户名称: " prop="account_name">
                <el-input v-model="invoiceInfoForm.account_name" placeholder="请输入账户名称" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="开户行名称: " prop="bank_name">
                <el-input v-model="invoiceInfoForm.bank_name" placeholder="请输入开户行名称" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="银行账号: " prop="bank_account">
                <el-input v-model="invoiceInfoForm.bank_account" placeholder="请输入银行账号" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="handleSave">保存开票信息</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 开票信息 -->
        <vxe-grid ref="formRef" border background resizable max-height="480" align="center"
          :columns="invoiceTableColumn" :data="invoiceInfoTabelData" :loading="loading"
          :row-config="{ height: 43, isCurrent: true, isHover: true }" show-overflow>
          <!-- 行操作按钮 -->
          <template #grid_opration="{ row, column, $rowIndex, $columnIndex }">
            <el-button v-for="(item, i) in optColumnButtonList" :key="'opt_' + row.id + '_' + i" type="text" @click="
              toolbarButtonCallBack(
                row,
                column,
                $rowIndex,
                $columnIndex,
                item.clickFn
              )
            ">
              {{ item.title }}
            </el-button>
          </template>
          <!-- 分页器 -->
          <!-- <template #pager>
                        <vxe-pager :layouts="[
                            'Sizes',
                            'PrevJump',
                            'PrevPage',
                            'Number',
                            'NextJump',
                            'FullJump',
                            'Total',
                        ]" :current-page.sync="tablePage.page_num" :page-size.sync="tablePage.page_amounts"
                            :total="tablePage.total" @page-change="handlePageChange" />
                    </template> -->
        </vxe-grid>
      </div>
    </el-card>

    <!-- 编辑弹窗 -->
    <el-dialog :visible="showEditDialog" title="编辑开票信息">
      <el-form :rules="editInvoiceRules" ref="editInvoiceRef" :model="editInvoice" label-width="120px">
        <el-form-item label="开票名称" prop="invoice_name">
          <el-input placeholder="请输入邮政编码" v-model="editInvoice.invoice_name"></el-input>
        </el-form-item>
        <el-form-item label="组织信用代码" prop="bank_code">
          <el-input placeholder="请输入收件人" v-model="editInvoice.bank_code"></el-input>
        </el-form-item>
        <el-form-item label="账户名称" prop="account_name">
          <el-input placeholder="请输入联系电话" v-model="editInvoice.account_name"></el-input>
        </el-form-item>
        <el-form-item label="开户名称" prop="bank_name">
          <el-input placeholder="请输入详细地址" v-model="editInvoice.bank_name"></el-input>
        </el-form-item>
        <el-form-item label="银行账号" prop="bank_account">
          <el-input placeholder="请输入联系邮箱" v-model="editInvoice.bank_account"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleConfirm">确认</el-button>
          <el-button @click="handleCancle">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addInvoiceAPI, getCustomerDetailAPI, getInvoiceListAPI, deleteInvoiceAPI, getInvoiceDetailAPI, editInvoiceAPI } from '@/api/customer'
export default {
  props: {
    customerCid: {
      // type: Number,
      required: true
    }
  },
  data() {
    return {
      invoiceInfoForm: {
        invoice_name: '',
        bank_code: '',
        account_name: '',
        bank_name: '',
        bank_account: '',
      },
      invoiceInfoTabelData: [],
      invoiceTableColumn: [
        // { type: 'checkbox', width: 50 },
        { type: 'seq', title: '序号', width: 60 },
        { field: 'invoice_name', title: '开票名称' },
        { field: 'bank_code', title: '组织信用代码' },
        { field: 'account_name', title: '账户名称' },
        { field: 'bank_name', title: '开户名称' },
        { field: 'bank_account', title: '银行账号' },
        {
          field: '',
          title: '操作',
          fixed: 'right',
          slots: { default: 'grid_opration' }
        }
      ],
      loading: false,
      optColumnButtonList: [
        { type: 'edit', title: '编辑', clickFn: this.handleEdit },
        { type: 'delete', title: '删除', clickFn: this.handleDelInvoice },
      ],

      showEditDialog: false,
      editInvoice: {
        invoice_name: '',
        bank_code: '',
        account_name: '',
        bank_name: '',
        bank_account: '',
      },


      addInvoiceRules: {
        invoice_name: [
          { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
        ],
        bank_code: [
          { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
        ],
        account_name: [
          { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
        ],
        bank_name: [
          { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
        ],
        bank_account: [
          { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
        ]
      },
      editInvoiceRules: {
        invoice_name: [
          { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
        ],
        bank_code: [
          { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
        ],
        account_name: [
          { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
        ],
        bank_name: [
          { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
        ],
        bank_account: [
          { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
        ]
      },
    }
  },
  mounted() {
    if (this.customerCid) {
      this.loading = true
      this.getCustomerDetail(this.customerCid)
      this.getInvoiceList(this.customerCid)
    }
  },
  methods: {
    async getCustomerDetail(customerCid) {
      const res = await getCustomerDetailAPI(customerCid)
      console.log(res);
      res.data.customer_main_chat_ways = res.data.customer_main_chat_ways.split(',')
      this.customerForm = res.data
    },

    // 获取开票列表
    async getInvoiceList(customerCid) {
      const res = await getInvoiceListAPI({ cid: customerCid })
      if (res.code === 200) {
        this.invoiceInfoTabelData = res.data_list
        this.loading = false
      }
    },
    // 列表中的操作按钮触发的回调
    toolbarButtonCallBack(row, column, rowIndex, columnIndex, clickFn) {
      if (clickFn) {
        window.setTimeout(() => {
          clickFn(row, column, rowIndex, columnIndex)
        }, 50)
      }
    },

    // 重置
    handleReset() {
      this.$refs.invoiceInfoFormRef.resetFields()
    },

    // 点击返回
    goaback() {
      this.$emit('goback')
      // this.$refs.customerFormRef.resetFields()
    },

    // 保存
    async handleSave() {
      try {
        await this.$refs.invoiceInfoFormRef.validate()
        this.loading = true
        const res = await addInvoiceAPI({
          cid: this.customerCid,
          ...this.invoiceInfoForm
        })
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.handleReset()
          this.getInvoiceList(this.customerCid)
        }
      } catch (error) {

      }
    },

    // 删除地址中
    handleDelInvoice(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.loading = true
          const res = await deleteInvoiceAPI({ in_id: row.in_id })
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getInvoiceList(this.customerCid)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    async handleEdit(row) {
      this.showEditDialog = true
      const res = await getInvoiceDetailAPI(row.in_id)
      this.editInvoice = res.data
    },

    // 确认
    async handleConfirm() {
      try {
        await this.$refs.editInvoiceRef.validate()
        const res = await editInvoiceAPI(this.editInvoice)
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.getInvoiceList(this.customerCid)
          this.showEditDialog = false
          this.loading = true
        }
      } catch (error) {
      }
    },

    // 取消
    handleCancle() {
      this.showEditDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.addCustomerText {
  color: #1ecba3;
  font-size: 22px;
}
</style>
